<template style="z-index: 100;">
	<!-- 底部导航 -->

	<view class="fui-tabbar__box" style="background-color: white;">
		<div
			style="z-index: 100;position: relative;box-shadow: var(--td-tab-bar-round-shadow, var(--td-shadow-3, 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08)));;background: white;">

			<div class="menubar" style="height: 120rpx;position: relative;width: 100%;z-index: 999;">
				<div v-for="(item, index) in menulist">
					<div @click="tabbarChange(item.path)" class="menubar-item" style="position: relative;">
						<div v-show="index == current"
							style="background-color: orange;width: 52rpx;height: 52rpx;position: absolute;top: 12rpx;margin-right: -18rpx;border-radius: 999rpx;z-index: -1;display:{{active === item.path ? '':'none'}} ;transition: 0.1s;" />

						<fui-icon :name="item.icon" :size="48"></fui-icon>


						<span style="font-size: 24rpx;" :class="index == current ? 'active-span' : 'disactive-span'">
							{{item.label}}
						</span>
					</div>
				</div>
			</div>
			<div data-visible="true" @click="showPopup"
				style="display: flex;justify-content: center;;align-items: center;z-index: 9999;position: absolute;background: orange;width: 90rpx;height: 90rpx;left:0;right:0;bottom: 28rpx;margin: 0 auto;border-radius: 32rpx;box-shadow: 0 10px 20px 0 #e8b14c66;top: 15rpx;">
				<fui-icon color="white" name="plus" :size="72"></fui-icon>
			</div>
			<fui-safe-area></fui-safe-area>
		</div>

	</view>
	<fui-bottom-popup safeArea="false" :show="showPop" @close="closePopup">
		<view class="fui-custom__wrap">
			<div @click="scanCode"
				style="border-radius: 16rpx;height: 120rpx;background-color: rgb(203, 240, 255);margin:24rpx 64rpx;display: flex;flex-direction: row;padding:8rpx 16rpx;align-items: center;">
				<image src="/static/image/scanCode.png" style="width: 80rpx;height: 80rpx;margin: 8rpx;" />
				<div style="display: flex;flex-direction: column;justify-content: space-around;z-index: 1;flex: 1;">
					<span style="font-size: 32rpx;font-weight: bolder;margin-bottom: 8rpx;">扫码录入</span>
					<span style="color: black;font-size: 20rpx;">扫描学生码快速录入成绩</span>
				</div>
				<t-icon style="color:black;" size="44rpx" name="chevron-right"></t-icon>

			</div>

			<div @click="closePopup" data-visible="false" bind:tap="onClose"
				style="height: 120rpx;width: 120rpx;background-color: rgb(240, 240, 240);border-radius: 999rpx;display: flex;align-items: center;justify-content: center;margin: 0 auto;">
				<fui-icon name="close" :size="48"></fui-icon>
			</div>
		</view>
	</fui-bottom-popup>

	<fui-modal :show="show" title="提示" descr="扫码插件初始化失败,请手动输入" @click="onClick">
		<fui-form-item label="学号或姓名">
			<fui-input v-model="inputStuNo" :borderBottom="false" :padding="[0]" placeholder="请输入学号或姓名"></fui-input>
		</fui-form-item>
	</fui-modal>
	
	<fui-modal :show="showSearchStu" title="提示" descr="查询到多位学生,请手动选择" @click="onClick">
		<div style="display: flex;flex-direction: column;width: 100%;">
			<div @click="gotoStuInfo(item.id)" style="margin: 16rpx 8rpx;background-color: white;display: flex;align-items: center;border-radius: 16rpx;padding: 8rpx 32rpx;"
				v-for="(item,index) in stuList">
				<image style="width: 64rpx;height: 64rpx;margin-right: 8rpx;" :src="item.sex==1?'../../static/icon/boy.png':'../../static/icon/girl.png'"></image>
				<div>
					<div style="margin-left: 16rpx;font-size: 36rpx;font-weight: 600;">姓名：{{item.name}}</div>
					<div style="margin-left: 16rpx;font-size: 28rpx;">学号：{{item.stuNo}}</div>
				</div>
				<div style="flex: 1;"></div>
				<fui-icon size="46" name="arrowright"></fui-icon>
			</div>
		</div>
		
	</fui-modal>
</template>

<script>
	import request from "/request/request.js"
	import store from '/store/index.js'
	import wx from 'weixin-js-sdk';
	export default {

		props: {
			current: Number
		},
		data() {
			return {
				show: false,
				showSearchStu:false,
				qrResult: "--",
				showSafeArea: false,
				showPop: false,
				active: '',
				paddingBottomHeight: 0,
				wxIsReady: false,
				inputStuNo: '',
				menulist: [{
						icon: 'home',
						value: '/pages/home/home',
						path: '/pages/home/home',
						iconPath: '../asset/icon/circle.png',
						selectedIconPath: '../asset/icon/circle-active.png',
						label: '首页'
					},
					{
						icon: 'my',
						value: '/pages/mine/mine',
						path: '/pages/mine/mine',
						label: '我的',
						iconPath: '../asset/icon/mine.png',
						selectedIconPath: '../asset/icon/mine-active.png',
					},
				],
				stuList:[],
			};
		},
		mounted() {
			console.log("tabbar ready");
		},
		created() {
			let that = this;
			console.log("onshow");
			uni.$on("scanLister",(res)=>{
				console.log(res);
				that.scanCode();
			})
			let url = window.location.href.split('#')[0]; //获取当前的访问路径，这个要提交给后台的
			console.log(url);
			
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
			console.log("wx.config");
			request({
				url: `/wechat/getConfig`,
				method: 'POST',
				data: {
					url: url
				}
			}).then((res) => {
				let data = res.data;
				that.wxConfig(data.appId, data.timestamp, data.nonceStr, data.signature);
				console.log(res);
			}, (err) => {
				console.log('fail' + err);
			});
		},
		watch: {

		},
		methods: {
			wxConfig(appId, timestamp, nonceStr, signature) {
				console.log(appId);
				console.log(timestamp);
				console.log(nonceStr);
				console.log(signature);
				let that = this
				wx.config({
					debug: false, // 开启调试模式,
					appId: appId, // 必填，企业号的唯一标识
					timestamp: timestamp, // 必填，生成签名的时间戳
					nonceStr: nonceStr, // 必填，生成签名的随机串
					signature: signature, // 必填，签名
					jsApiList: ['scanQRCode', 'checkJsApi'], // 必填，需要使用的JS接口列表
				});
				wx.ready((res) => {
					that.wxIsReady = true;
				})
				wx.error(function(res) {

				});
			},
			tabbarChange(path) {
				console.log(path)
				uni.switchTab({
					url: path
				})
			},
			scanCode() {
				let that = this;
				if (this.wxIsReady) {
					wx.scanQRCode({
						needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
						scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
						success: function(res) {
							that.qrResult = res;
							that.inputStuNo = res.resultStr;
							that.getStudentsInfo();
						},
						fail: function(response) {
							console.log("调用扫码失败")
							that.$toast(response);
							alert(' wx.scanQRCode失败')
						},
					});
				} else {
					uni.navigateTo({
						url:"/pages/scanCodePage/scanCodePage"
					})
					// this.showModal();
				}
			},
			//调用此方法显示模态框
			showModal() {
				this.show = true;
			},
			//模态框按钮点击事件
			onClick(e) {
				if (e.index == 1) {
					this.getStudentsInfo();
				} else {
					this.onCancel();
				}

			},
			//关闭模态框
			onCancel(e) {
				this.show = false;
				this.showSearchStu = false;
			},

			//调用此方法显示底部弹出层
			showPopup() {
				this.showPop = true
			},
			closePopup(type) {
				this.showPop = false
			},
			getStudentsInfo() {
				let that = this;
				request({
					url: `/student/getStudentsInfo`,
					method: 'POST',
					data: {
						nameOrStuNo: this.inputStuNo
					}
				}).then((res) => {
					console.log(res);
					if(res.data.records.length > 0){
						if(res.data.records.length === 1){
							that.gotoStuInfo(res.data.records[0].id);
						}else{
							that.show = false;
							that.stuList = res.data.records;
							that.showSearchStu = true;
						}
					}
					that.inputStuNo = "";
					
				}, (err) => {
					console.log('fail' + err);
				});
			},
			gotoStuInfo(stuId){
				console.log(stuId);
			
				this.show = false;
				this.showSearchStu = false;
				let semester = store.state.selectSemester.value;
				let subId = store.state.selectSubject.value;
				uni.navigateTo({
					url:'/pages/studentInfo/studentInfo?isScan=true&stuId=' + stuId + "&semester=" + semester + "&subId=" + subId
				});
				
			}
		}
	};
</script>

<style scoped>
	.tabbarActive {
		color: #79D5AD !important;
	}

	.fui-custom__wrap {
		padding: 64rpx 8rpx;
	}

	.tabbar {
		position: fixed;
		bottom: 48rpx;
		left: 45rpx;
		right: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 600rpx;
		height: 126rpx;
		border-radius: 100rpx;
		background-color: #F5F6F7;
		padding: 0 30rpx;
		z-index: 99;
	}

	.tabbar-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100rpx;
	}

	/* 选中后 */
	.item-img {
		width: 104rpx;
		height: 104rpx;
		border-radius: 50%;
		box-shadow: 0rpx 0rpx 10rpx 10rpx #EEEFF0;
	}

	/* 选中前 */
	.item-img1 {
		width: 50rpx;
		height: 50rpx;
	}

	.menubar {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.menubar-item {
		width: 120rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
		position: relative;
	}

	.menubar-item image {
		width: 48rpx;
		height: 48rpx;
	}

	.menubar-item span {
		font-size: 24rpx;
	}

	.disactive-span {
		color: rgba(121, 121, 121, 0.9);
	}

	.active-span {
		color: rgba(0, 0, 0, 0.9);
	}

	.block {
		/*background: #fff;*/
		color: #333;
		display: flex;
		flex-direction: column;

	}

	.block--top,
	.block--bottom {
		width: 100vw;
		height: 240px;
	}

	.block--left,
	.block--right {
		width: 280px;
		height: 100vh;
	}

	.block--center {
		width: 240px;
		height: 240px;
	}

	.wrapper+.wrapper {
		margin-top: 32rpx;
	}
</style>